<!--
 * @Author: your name
 * @Date: 2022-03-02 12:50:26
 * @LastEditTime: 2022-04-22 10:27:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\growing-img.vue
-->
<template>
  <!-- 生长数据 -->
  <el-card id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>生长周期 GROWTH CYCLE</span>
    </div>
    <p>生长记录图片</p>
    <div class="honorary">
      <el-button
        class="prev"
        type="text"
        @click="prev()"
      ><i class="el-icon-arrow-left"></i></el-button>
      <el-carousel
        ref="grofix"
        v-loading="loading"
        arrow="never"
        :autoplay="false"
        indicator-position="none"
      >
        <el-carousel-item
          v-for="(item, index) in growthlist"
          :key="index"
        >
          <div class="imgl">
            <div
              v-for="(item1, index1) in item"
              :key="index1"
              class="imgdet"
              @click="imgUrl(item1.pictureData, item1.growthRecordNo)"
            >
              <div class="shadows">
                <div class="shadowx"></div>
                <el-button
                  class="shadowBut"
                  type="text"
                >点击查看大图</el-button>
                <img :src="item1.pictureData" alt="" />
              </div>
              <p class="text">{{ item1.collectDate }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <el-button
        class="next"
        type="text"
        @click="next()"
      ><i class="el-icon-arrow-right"></i></el-button>
    </div>
    <!-- 图片弹出框 -->
    <el-dialog title="生长记录详情" :visible.sync="dialogFormVisible">
      <div class="dialog-img">
        <img :src="selectedpicdata" />
        <div>
          <ul>
            <li v-for="(item, index) in Environmentlist" :key="index">
              <svg-icon :icon-class="item.url" />
              <div class="contt">
                <p>{{ item.dataItemValue }}{{ item.symbol }}</p>
                <p>{{ item.dataTypeName }}</p>
              </div>
              <div class="ien">
                {{ index+1 }}/{{ Environmentlist.length }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import graApi from "@/api/trace-source-web/production-api/index-primary.js"

export default {
  props: {
    batId: {
      type: [Number, String],
      default: () => ''
    },
    startTime: {
      type: [Number, String],
      default: () => ""
    },
    endTime: {
      type: [Number, String],
      default: () => ""
    }
  },
  data() {
    return {
      growthlist: [],
      batchNo: "",
      selectedpicdata: "",
      dialogFormVisible: false,
      growthPage: 1,
      databaseName: "",
      totalPages: 0,
      loading: false,
      Environmentlist: []
    };
  },
  watch: {
    startTime: {
      handler(val) {
        this.getgrowthdata()
      }
    }
  },
  mounted() {
    this.batchNo = this.batId;
  },
  methods: {
    // 弹出框
    imgUrl(e, id) {
      this.Environmentlist = []
      console.log(id)

      graApi.getEnvironmentItemByGrowthRecordId(id).then(res => {
        let data = res.data
        let listone = data || []
        if (listone[0]) {
          console.log(listone)
          listone.forEach((itemone, indexone) => {
            if (itemone.dataTypeName === "空气温度") {
              this.$set(
                itemone,
                "url",
                "kongqiwendu"
              );
            } else if (itemone.dataTypeName === "空气湿度") {
              this.$set(
                itemone,
                "url", "shidu"
              );
            } else if (itemone.dataTypeName === "光照度") {
              this.$set(
                itemone,
                "url", "guangzhaodu"
              );
            } else if (itemone.dataTypeName === "土壤温度") {
              this.$set(
                itemone,
                "url", "turangwengdu"
              );
            } else if (itemone.dataTypeName === "土壤湿度") {
              this.$set(
                itemone,
                "url", "turangshidu"
              );
            } else if (itemone.dataTypeName === "酸碱度") {
              this.$set(
                itemone,
                "url", "ph"
              );
            } else {
              console.log("空字符串出现");
            }
          })
        }
        this.Environmentlist = listone
      })
      this.selectedpicdata = e;
      this.$nextTick(() => {
        this.dialogFormVisible = true;
      })
    },
    // 生长数据相关
    getgrowthdata() {
      let params = {
        entity: {
          batchNo: this.batchNo,
          startDate: this.startTime,
          endDate: this.endTime
        },
        page: this.growthPage,
        size: 5,
        sort: "collectTime"
      }
      this.loading = true;
      graApi.findGrowthAll(params).then(res => {
        let list = [];
        if (res.data) {
          this.totalPages = res.data.totalPages;
          list = res.data.content;
        }
        let listtwo = [];
        let newlist = [];
        if (list) {
          list.forEach(async (item, index) => {
            if (item) {
              let pushobj = {
                collectDate: this.dateToFormatname(item.collectTime),
                pictureId: item.pictureId,
                growthRecordId: item.growthRecordId,
                growthRecordNo: item.growthRecordNo,
                pictureData: require("@/assets/trace-source-manage/topscrback.png")
              };
              if (item.img) {
                pushobj.pictureData = "data:image/png;base64," + item.img;
              }
              listtwo.push(pushobj);
              // 排序
              // listtwo.sort(function(a, b) {
              //   return b.collectDate > a.collectDate ? 1 : -1;
              // });
              if (index === list.length - 1) {
                for (let i = 0; i < listtwo.length; i += 3) {
                  newlist.push(listtwo.slice(i, i + 3));
                }
              }
            }
          });
          setTimeout(() => {
            this.loading = false;
          }, 200);
          if (this.growthPage >= this.totalPages) {
            if (this.totalPages === 0) return;
            // this.$message.success("已到最后一页");
          }
        }

        // console.log(newlist)
        this.growthlist = newlist;
      })
    },
    // 跑马灯左右切换
    prev() {
      this.$refs.grofix.prev();
      this.growthPage = this.growthPage - 1;
      if (this.growthPage <= 1) {
        this.growthPage = 1;
      }
      this.getgrowthdata();
    },
    next() {
      this.$refs.grofix.next();
      this.growthPage = this.growthPage + 1;
      if (this.growthPage >= this.totalPages) {
        this.growthPage = this.totalPages;
      }
      this.getgrowthdata();
    }
  }
};
</script>
<style lang="scss" scoped>
#growing {
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  ::v-deep .el-carousel {
    // padding: 10px;
    padding-top: 10px;
    width: 90%;
    .el-carousel__container {
      // background-color: rgba(0,57,71,0.55);
      .el-carousel__item--card {
        width: 40% !important;
      }
    }
  }
  ::v-deep .el-card__body {
    padding: 10px !important;
    > p {
      margin-left: 20px;
      font-size: 22px;
    }
  }
  .imgl {
    margin: 0 40px;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    .imgdet {
      border-radius: 0;
      .shadows {
        margin: 2px !important;
        box-sizing: content-box;
        position: relative;
        .shadowx {
          display: none;
          position: absolute;
          width: 100%;
          height: 100%;
          // top: 0;
          // bottom: 0;
          // left: 0;
          // right: 0;
          background-color: rgba(0, 20, 26, 0.71);
        }
        .shadowBut {
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
        }
      }
      .shadows:hover {
        // box-sizing: border-box;
        // width: calc(260px - 2px);
        border: 0.1px solid rgba(255, 255, 255, 0.54);
        .shadowBut {
          display: block;
        }
        .shadowx {
          display: block;
        }
      }
      img {
        border: none !important;
        border-radius: 0 !important;
        width: 260px !important;
        height: 180px !important;
      }
      .text {
        text-align: center;
      }
    }
  }
}

.honorary {
  width: 100%;
  height: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  background: #0f4656;
  align-items: center;
}
.next {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #fff;
  }
}
.prev {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #fff;
  }
}

.prev:hover,
.next:hover {
  i {
    color: #409eff;
  }
}
// 弹出框
::v-deep .el-dialog {
  // .el-dialog__body {
  //   overflow-y: auto !important;
  // }
  width: 67vw;

  .dialog-img {
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: space-between;
    > img {
      width: 80%;
      height: 91%;
    }
    > div {
      width: 18%;
      ul {
        height: 100%;
        overflow-x: auto;
        margin: 0;
        width: 100%;
        padding: 0;
        li {
          height: 80px;
          list-style-type: none;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: center;
          background-color: #00597670;
          border: 1px solid #00394B80;
          border-radius: 15px;
          margin-bottom: 10%;
          svg {
            color: #fffff0;
            font-size: 24px;
          }
          div {
              color: #fffff0;
          }
          .contt {
            width: 50%;
            p {
              font-size: 12px !important;
              padding: 10px 0;
              margin: 0 10px 0 0;
              text-align: center;
              &:first-child {
                border-bottom: 1px solid #F2F2F2;
              }
            }
          }
          .ien {
            width: 20%;
            text-align: center;
            border-left: 1px solid #F2F2F2;
            height: 60%;
            line-height: 48px;
          }
        }
      }
    }
  }
}
</style>
